<template>
  <div class="dingdanxq">
    <backzj :mssg="aaa" />
    <div class="dizhi padd1">请确定收货地址是否正确</div>
    <!-- 地址信息 -->
    <div class="weizhi padd1">
      <div class="wleft">
          <img :src="SMDataURL+'/images/location.png'" class="dzimg"></img>
          <div class="dzwzi">
            <p><span class="sprt">et</span><span>12341451543</span></p>
            <p>金黄色的干粉砂浆的快感发送到快感发送到</p>
          </div>
      </div>
      <img :src="orderInfo.photos" class="xyyy"></img>
    </div>
    <!-- 地址信息 -->
    <!-- 商品信息 -->
    <div class="bian padd1">订单编号:{{orderInfo.orderId}}</div>
    <div class="spgg">
        <div class="spmm">
            <img :src="SMDataURL+'/images/wdyass9.jpg'"></img>
        </div>
        <div class="spxx">
            <div class="mshu">{{orderInfo.productName}}</div>
            <div class="ggee">{{orderInfo.attributeOne}}</div>
            <p class="podf"><span class="ff1">￥{{orderInfo.price}}</span><span>×{{orderInfo.number}}</span></p>
        </div>
    </div>
    <!-- 商品信息 -->
    <!-- 配送信息 -->
    <div class="padd1 sdpop">
        <div class="xuttv">
            <p>到期续团</p>
            <img :src="SMDataURL+'/images/kddwen0.png'" class="went"></img>
        </div>
        <mt-switch v-model="value"></mt-switch>
    </div>
    <div class="padd1 sdpop">
        <p class="peiss">配送方式</p>
        <p class="pswu">无</p>
    </div>
    <div class="padd1 sdpop">
        <p class="peiss">运费</p>
        <p class="red">￥{{orderInfo.expressFee}}</p>
    </div>
    <div class="padd1 beizz">买家备注</div>
    <div class="bieez">
        <textarea name="" id="" cols="30" rows="10" class="hiaf"></textarea>
    </div>
    <!-- 配送信息 -->
    <!-- 合计支付 -->
    <div class="zifhu">
        <div class="zleft">
            <p>合计：<span class="red">￥</span><span class="ff2">{{parseFloat((orderInfo.number*orderInfo.price).toFixed(2))}}</span></p>
            <p class="red dgsdg">(含运费)</p>
        </div>
        <div class="zright" @click="zhifu">立即支付</div>
    </div>
    <!-- 合计支付 -->
    <!-- 支付弹框 -->
        <div class="zhezhao" v-show="zifs" @click="zhifu"></div>
        <div :class="{'paypopdetai':zifs,'paypopdetaiout':!zifs}">
            <div class="paywindow">
                <img :src="SMDataURL+'/images/cuoyinke.png'" class="paywin" @click="zhifu"></img>
                <div class="payTitle">支付方式</div>
                <div class="fenge"></div>
                <div class="mhpof" @click="yuay">
                    <div class="mhpof-z">
                        <img :src="SMDataURL+'/images/chayu-wx.png'"></img>
                        <p>微信支付</p>
                    </div>
                    <div :class="{'mkright':poop,'mkrightchioce':!poop}" :type="paytype">
                        <p></p>
                    </div>
                </div>
                <div class="mhpof" @click="yuay1">
                    <div class="mhpof-z">
                        <img :src="SMDataURL+'/images/chayu-lq.png'"></img>
                        <p>我的钱包余额<span>（剩余￥999999）</span></p>
                    </div>
                    <div :class="{'mkright':!poop,'mkrightchioce':poop}" :type="paytype">
                        <p></p>
                    </div>
                </div>
                <div class="bubottom" @click="toptuan">立即支付<span>￥99999</span></div>
            </div>
        </div>
    <!-- 支付弹框 -->
  </div>
</template>

<script>
import backzj from "../components/backzj.vue";
import { getuserad, getorderInfo, getpayzt ,beforpayment} from "../api/spell.js"; // 导入api
export default {
  components: { backzj },
  data() {
    return {
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
      aaa: "订单详情",
      zifs: false,
      poop: false,
      orderInfo: "",
      paytype: "",
    };
  },
  methods: {
    zhifu() {
      getpayzt({
        sm_companyId: -7,
        wx_appId: "wxafc76ac0e8b430d7",
      }).then((res) => {
        console.log("支付主体===", res.data);
        this.paymain = res.data;
      });
      this.zifs = !this.zifs;
    },
    yuay() {
      this.poop = false;
      this.paytype = "wx";
      console.log("支付方式", this.paytype);
    },
    yuay1() {
      this.poop = true;
      this.paytype = "balance";
      console.log("支付方式", this.paytype);
    },
    toptuan() {
      //立即付款操作
      if (this.paytype == "balance") {
        beforpayment({
          attach: encodeURIComponent('7_0_' + this.paymain.soruceId + '_5'+','+this.orderInfo.orderId),
          body:encodeURIComponent(this.orderInfo.productName),
          detail:encodeURIComponent(this.orderInfo.productName),
          money:(this.orderInfo.number*this.orderInfo.price)*100,
          userId:"7009",
          openid:"4w646erfeert",
          wxappid:"wxafc76ac0e8b430d7"
        }).then((res) => {
          console.log("立即付款返回的参数",res,data)
        });
      }

      // this.$router.push("/pintuan");
    },
  },
  created() {
    console.log("详情页传来的参数", this.$route.params);
    getorderInfo({
      orderId: this.$route.params.info.orderId,
    }).then((res) => {
      console.log("订单详情", res.data);
      this.orderInfo = res.data[0];
    });
    this.$store.dispatch("toggleAPIURL", process.env.NODE_ENV);
    getuserad().then((res) => {
      console.log("地址数据", res);
    });
  },
};
</script>

<style scoped>
.padd1 {
  padding: 0 20px;
}
.dizhi {
  font-size: 14px;
  color: #ccc;
  margin-top: 44px;
  height: 50px;
  line-height: 50px;
}
/* 地址信息 */
.weizhi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 30px 0;
}
.wleft {
  width: 90%;
  display: flex;
  align-items: center;
}
.dzimg {
  width: 19px;
  height: 23px;
  margin-right: 10px;
}
.sprt {
  margin-right: 10px;
}
.dzwzi {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #333;
}
.dfga {
  font-size: 14px;
  color: #333;
}
.xyyy {
  width: 8px;
  height: 13px;
}
/* 地址信息 */
/* 商品信息 */
.bian {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
.spgg {
  width: 90%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid gainsboro;
  margin: 0 auto;
  padding-bottom: 4px;
}
.spmm {
  width: 82px;
  height: 82px;
  border-radius: 4px;
  margin-right: 10px;
}
.spmm img {
  max-height: 100%;
}
.mshu {
  font-size: 15px;
  color: #000;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.spxx {
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
}
.ggee {
  font-size: 15px;
  color: #333;
}
.podf {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ff1 {
  color: red;
  font-weight: bold;
}
.ff2 {
  font-size: 18px;
  color: red;
  font-weight: bold;
}
/* 商品信息 */
/* 配送信息 */
.sdpop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0;
  font-size: 14px;
}
.sdpop .mint-switch {
  zoom: 0.6;
}
.xuttv {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #000;
}
.went {
  width: 12px;
  height: 12px;
}
.peiss {
  font-size: 14px;
  color: #000;
}
.pswu {
  color: #999999;
}
.red {
  color: red;
}
.beizz {
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
}
.bieez {
  width: 90%;
  height: 100px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid gainsboro;
}
.hiaf {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}
/* 配送信息 */
/* 合计支付 */
.zifhu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: #eee;
  z-index: 100;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  box-sizing: border-box;
}
.zleft {
  display: flex;
  flex-direction: column;
  margin: 10px;
}
.dgsdg {
  margin-left: 15px;
}
.zright {
  display: inline-block;
  width: 110px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background: -webkit-linear-gradient(left, #ff1f1f, #ff592d);
  background: -o-linear-gradient(right, #ff1f1f, #ff592d);
  background: -moz-linear-gradient(right, #ff1f1f, #ff592d);
  background: linear-gradient(to right, #ff1f1f, #ff592d);
  border-radius: 20px;
  margin: 10px;
}
/* 合计支付 */
/* 支付弹框 */
.paypopdetai {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 200;
  background: #f6f8fa;
  transition: bottom 0.4s;
  width: 100%;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
}
.paypopdetaiout {
  position: fixed;
  bottom: -1000px;
  left: 0;
  z-index: 200;
  background: #f6f8fa;
  transition: bottom 0.4s;
  width: 100%;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
}
.paywindow {
  padding: 30px;
  box-sizing: border-box;
}
.payTitle {
  font-size: 18px;
  text-align: center;
  color: #333333;
  line-height: 21px;
  font-weight: bold;
}
.fenge {
  height: 2px;
  opacity: 1;
  background: #f6f6f6;
  margin-top: 20px;
}
.mhpof {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #f6f6f6;
}
.mhpof-z {
  display: flex;
  align-items: center;
}
.mhpof-z img {
  width: 26px;
  height: 26rpx;
}
.mhpof-z p span {
  font-size: 13px;
  color: #999999;
}
.mhpof-z p {
  font-size: 15px;
  color: #333333;
  display: inline-block;
  margin-left: 10px;
}
.mkright {
  width: 16px;
  height: 16px;
  border: 1px solid #666666;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkrightchioce {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #428ceb;
}
.mkrightchioce p {
  width: 10px;
  height: 10px;
  opacity: 1;
  background: #428ceb;
  border-radius: 50%;
}
.bubottom {
  margin-top: 35px;
  width: 100%;
  height: 41px;
  opacity: 1;
  background: #428ceb;
  border-radius: 10px;
  font-size: 15px;
  color: #ffffff;
  line-height: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bubottom span {
  margin-left: 16px;
  font-size: 16px;
}
.paywin {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
}
/* 支付弹框 */
</style>